<template>        
  <div class="customer-list">
       <span style="font-size: 30px;position: relative; top: -10px ;">产品类型</span>
       <!-- 这里放置表格等内容 -->
       <div class="add-button-bottom">
       <el-button class="add-button" @click="showAddModal">新增产品型号</el-button>
      </div>
        <!-- 下划线分隔 -->
       <el-divider></el-divider>
        <!-- 身体 -->
        <div id="bodydiv">
            <el-table :data="models" style="width: 100%" class="centered-table" border stripe> 
                <el-table-column prop="model_id" label="序号" width="auto"></el-table-column>
                <el-table-column prop="model_model" label="产品型号" width="auto"></el-table-column>
                <el-table-column prop="model_name" label="产品名称" width="auto"></el-table-column>
                <el-table-column prop="model_class" label="配料种类" width="auto">
                  <template slot-scope="scope"> 
                    {{ scope.row.model_class }} 种
                  </template>
                </el-table-column>
                <el-table-column prop="model_bulk_units" label="散装单位" width="auto"></el-table-column>
                <el-table-column prop="model_bulk_price" label="散装单价" width="auto">
                  <template slot-scope="scope">
                    ￥{{ scope.row.model_bulk_price }}
                  </template>
                </el-table-column>
                <el-table-column prop="model_wrap_units" label="包装单位" width="auto"></el-table-column>
                <el-table-column prop="model_wrap_price" label="包装单价" width="auto">
                  <template slot-scope="scope">
                    ￥{{ scope.row.model_wrap_price }}
                  </template>
                </el-table-column>
                <el-table-column prop="model_updated_date" label="版本更新时间" width="auto">
                 <template slot-scope="scope">
                    <span>{{ formatDate(scope.row.model_updated_date) }}</span>
                </template>
                </el-table-column>
                <el-table-column label="操作" width="250">
                    <template slot-scope="scope" >
                  <el-button size="mini" type="primary" icon="el-icon-view" @click="handleEdit(scope.row)">查看</el-button>
                  <el-button size="mini" type="danger" icon="el-icon-delete"  @click="handleDelete(scope.row.model_id)">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 下划线分隔 -->
        <el-divider></el-divider>

        <div id="taildiv">
          <!-- 分页 -->
 <el-pagination class="pagination"
            @size-change="change"
            @current-change="Ymchange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]" 
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="rows">
    </el-pagination>

      <!-- 模态框新增 -->
    <el-dialog :visible.sync="isAddModalVisible"
     :before-close="handleCloseModal">
          <div class="custom-div1">
          <button @click="fetchXH">提交新增</button>
        </div>
        <div class="custom-div" style="width: 300px; height: 260px;">
        <span>新增产品型号</span>
        </div>
        <el-button class="orange-button" @click="returnToList">返回列表</el-button>
        <el-form :model="form" class="custom-form">

          <el-form-item label="产品名称:" style="position: relative; righ: 200px; top: -230px;" >
            <el-select  v-model="form.model_name" auto-complete="off" style="width: 180px; height: 25px;" placeholder="请选择产品名称" @change="onCustomerContactChange($event)">
              <el-option
                v-for="item in listName"
                :key="item.di_name"
                :label="item.model_name"
                :value="item.di_name">
              </el-option>
            </el-select>
          </el-form-item> 
          <!-- 产品型号 -->
          <el-form-item label="产品型号:" style="position: relative; left: 280px; top: -293px;">
              <el-input v-model="form.model_model" auto-complete="off" style="width: 180px; height: 25px;"></el-input>
          </el-form-item>

          <!-- 更新日期选择框 -->
          <el-form-item label="更新日期:" style="position: relative; left: 560px; top: -355px;">
            <el-date-picker  v-model="form.model_updated_date" auto-complete="off" stype="date" placeholder="选择日期" style="width: 160px;"></el-date-picker>
          </el-form-item>
          <!-- 散装单位下拉框 -->
          <el-form-item label="散装单位:" style="position: relative; righ: 480px; top: -360px;" >
            <el-select  v-model="form.model_bulk_units" auto-complete="off"  placeholder="请选择" style="width: 180px;">
              <el-option
                v-for="item in list"
                :key="item.dd_label"
                :label="item.model_bulk_units"
                :value="item.dd_label">
              </el-option>
            </el-select>
          </el-form-item> 

          <!-- 散装单价 -->
          <el-form-item label="散装单价:" style="position: relative; righ: 480px; top: -360px;">
            <el-input v-model="form.model_bulk_price" auto-complete="off"  style="width: 180px; height: 25px;"></el-input>
          </el-form-item>
          <!-- 包装单位 -->
          <el-form-item label="包装单位:" style="position: relative; left: 280px; top: -480px;" >
          <el-select  v-model="form.model_wrap_units" auto-complete="off" placeholder="请选择" style="width: 180px;">
            <el-option
                v-for="item in list2"
                :key="item.dd_label"
                :label="item.model_wrap_units"
                :value="item.dd_label">
              </el-option>
          </el-select>
          </el-form-item>
          <!-- 包装单价 -->
          <el-form-item label="包装单价:" style="position: relative; left: 280px; top: -486px;">
          <el-input  v-model="form.model_wrap_price" auto-complete="off"  style="width: 180px; height: 25px;"></el-input>
          </el-form-item>
        <div style="border-bottom: 1px solid #e0e0e0; margin-top:-470px;"></div>

      <div class="e">
      <el-button class="a" @click="addCustomer" style="border:none;">添加</el-button>
          <el-table :data="allData" style="width:80%; border: 1px solid #ebeef5; background-color: #f7f7f7;">
              <el-table-column prop="model_from_id" type="index" label="序号"></el-table-column>
              <el-table-column prop="model_from_name" label="配料名称"></el-table-column>
              <el-table-column prop="model_from_weight" label="重量">
                 <template slot-scope="scope"> 
                    {{ scope.row.model_from_weight }}g
                  </template>
              </el-table-column>
              <el-table-column prop="model_from_model" label="型号" v-if="Ycchange"></el-table-column>
              <el-table-column label="操作" width="250">
                <template >
                  <el-button size="minin" type="danger" icon="el-icon-edit" @click="deleteCustomer(index)">删除</el-button>
                </template>
              </el-table-column>
          </el-table>
          <div style="border-bottom: 1px solid #e0e0e0; margin-top:80px; margin-left:60px; width: 100%;"></div>
      <div class="pagination-wrapper">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage1"
      :page-sizes="[3,6,9,12]"
      :page-size="pageSize1"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalItems">
    </el-pagination>
  </div>
      </div>
     </el-form>
    </el-dialog>
    <div>
    <el-dialog title="添加" :visible.sync="isAddProductVisible" width="400px" class="qw">
      <el-form :model="from" label-width="300px">
       <el-form-item label="产品型号" style="position: relative;  margin-left:-180px; top: 10px;" v-if="Ycchange">
      <el-input v-model="from.model_from_model" controls-position="right" v-if="Ycchange"></el-input>
       </el-form-item>
            <el-form-item label="配料名称" style="position: relative;  margin-left:-180px; top: 10px;">
            <el-select v-model="from.model_from_name" placeholder="请选择" style="width: 180px;">
            <el-option
              v-for="item in list3"
              :key="item.di_name"
              :label="item.model_from_name"
              :value="item.di_name">
            </el-option>
      </el-select>
    </el-form-item>
       <el-form-item label="重量" style="position: relative;  margin-left:-180px; top: 10px;">
      <el-input-number v-model="from.model_from_weight" :min="0" :max="200" :step="1" controls-position="right" style="width: 180px;"></el-input-number>
    </el-form-item>
  </el-form>
      <div>
        <span slot="footer" style="display: flex; justify-content: center;">
          <el-button  @click="isAddProductVisible = false"
            style="margin-left:40px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">取消</el-button>
          <el-button type="primary" @click="SubmitModelForm"
            style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">确定</el-button>
        </span>
      </div>
    </el-dialog>
    </div>


      <!-- 模态框修改 -->
    <el-dialog :visible.sync="isUpdateModalVisible">
          <div class="custom-div1">
          <button @click="fetchXg">修改</button>
        </div>
        <div class="custom-div" style="width: 300px; height: 260px;">
        <span>新增产品型</span>
        </div>
        <el-button class="orange-button" @click="returnToList">返回列表</el-button>
        <el-form :model="editForm" class="custom-form">
          <!-- 产品名称 -->
           <el-form-item label="产品Id:" style="position: relative; righ: 200px; top: -230px;" v-if="Ycchange" >
            <el-input v-model="editForm.model_id" auto-complete="off" style="width: 180px; height: 25px;"></el-input>
          </el-form-item>

          <el-form-item label="产品名称:" style="position: relative; righ: 200px; top: -230px;" >
            <el-select  v-model="editForm.model_name" auto-complete="off" style="width: 180px; height: 25px;" placeholder="请选择产品名称" @change="onCustomerContactChange($event)">
              <el-option
                v-for="item in listName"
                :key="item.di_name"
                :label="item.model_name"
                :value="item.di_name">
              </el-option>
            </el-select>
          </el-form-item>         
          <!-- 产品型号 -->
          <el-form-item label="产品型号:" style="position: relative; left: 280px; top: -293px;">
          <el-input v-model="editForm.model_model" auto-complete="off" style="width: 180px; height: 25px;"></el-input>
          </el-form-item>
          
          <!-- 更新日期选择框 -->
          <el-form-item label="更新日期:" style="position: relative; left: 560px; top: -355px;">
            <el-date-picker  v-model="editForm.model_updated_date" auto-complete="off" stype="date" placeholder="选择日期" style="width: 160px;"></el-date-picker>
          </el-form-item>
          <!-- 散装单位下拉框 -->
          <el-form-item label="散装单位:" style="position: relative; righ: 480px; top: -360px;" >
            <el-select  v-model="editForm.model_bulk_units" auto-complete="off" placeholder="请选择" style="width: 180px;">
              <el-option
                v-for="item in list"
                :key="item.dd_label"
                :label="item.model_bulk_units"
                :value="item.dd_label">
              </el-option>
            </el-select>
          </el-form-item> 
          <!-- 散装单价 -->
          <el-form-item label="散装单价:" style="position: relative; righ: 480px; top: -360px;">
            <el-input v-model="editForm.model_bulk_price" auto-complete="off" style="width: 180px; height: 25px;"></el-input>
          </el-form-item>
          <!-- 包装单位 -->
          <el-form-item label="包装单位:" style="position: relative; left: 280px; top: -480px;" >
          <el-select  v-model="editForm.model_wrap_units" auto-complete="off" placeholder="请选择" style="width: 180px;">
            <el-option
                v-for="item in list2"
                :key="item.dd_label"
                :label="item.model_wrap_units"
                :value="item.dd_label">
              </el-option>
          </el-select>
          </el-form-item>
          <!-- 包装单价 -->
          <el-form-item label="包装单价:" style="position: relative; left: 280px; top: -486px;">
          <el-input  v-model="editForm.model_wrap_price" auto-complete="off" style="width: 180px; height: 25px;"></el-input>
          </el-form-item>
        <div style="border-bottom: 1px solid #e0e0e0; margin-top:-470px;"></div>

      <div class="e">
      <el-button class="a" @click="UpdateCustomer" style="border:none;">添加</el-button>
          <el-table :data="modelfrom" style="width:80%; border: 1px solid #ebeef5; background-color: #f7f7f7;">
              <el-table-column prop="model_from_id"  label="序号"></el-table-column>
              <el-table-column prop="model_from_name" label="配料名称"></el-table-column>
              <el-table-column prop="model_from_weight" label="重量">
                <template slot-scope="scope"> 
                    {{ scope.row.model_from_weight }}g
                  </template>
              </el-table-column>
              <el-table-column prop="model_from_model" label="型号" v-if="Ycchange"></el-table-column>
              <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" icon="el-icon-edit" @click="UpdateXCustomer(scope.row)">修改</el-button>
                  <el-button size="mini" type="danger" icon="el-icon-delete" @click="DeleteCustomerY(scope.row.model_from_id)">删除</el-button>
                </template>
              </el-table-column>
          </el-table>
          <div style="border-bottom: 1px solid #e0e0e0; margin-top:80px; margin-left:60px; width: 100%;"></div>
      <div class="pagination-wrapper">
      <el-pagination
          @size-change="changeModel"
          @current-change="YmchangeModel"
          :current-page="currentPage2"
          :page-sizes="[3,6,9,12]"
          :page-size="pageSize2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="modelfroms">
    </el-pagination>
  </div>
  </div>
     </el-form>
    </el-dialog>
     <!-- 配料添加 -->
     <div>
    <el-dialog title="添加" :visible.sync="isUpateProductVisible" width="400px" class="qw">
      <el-form :model="editModelForm" label-width="300px">
       <el-form-item label="序号" style="position: relative;  margin-left:-180px; top: 10px;" v-if="Ycchange">
      <el-input v-model="editModelForm.model_from_id" controls-position="right" v-if="Ycchange"></el-input>
       </el-form-item>
            <el-form-item label="配料名称" style="position: relative;  margin-left:-180px; top: 10px;">
            <el-select v-model="editModelForm.model_from_name" placeholder="请选择" style="width: 180px;">
            <el-option
              v-for="item in list3"
              :key="item.di_name"
              :label="item.model_from_name"
              :value="item.di_name">
            </el-option>
      </el-select>
    </el-form-item>
       <el-form-item label="重量" style="position: relative;  margin-left:-180px; top: 10px;">
      <el-input-number v-model="editModelForm.model_from_weight" :min="0" :max="200" :step="1" controls-position="right" style="width: 180px;"></el-input-number>
    </el-form-item>
    </el-form-item>
       <el-form-item label="外键Id" style="position: relative;  margin-left:-180px; top: 10px;" v-if="Ycchange">
       <el-input v-model="editModelForm.bs_modelmodel_id" v-if="Ycchange"></el-input>
    </el-form-item> 
  </el-form>
      <div>
        <span slot="footer" style="display: flex; justify-content: center;">
          <el-button  @click="isUpateProductVisible = false"
            style="margin-left:40px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">取消</el-button>
          <el-button type="primary" @click="UpdateSubmitModelForm"
            style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">确定</el-button>
        </span>
      </div>
    </el-dialog>
     </div>
    <!-- 配料修改 -->
    <div>
    <el-dialog title="修改" :visible.sync="isUpatemodelProductVisible" width="400px" class="qw">
      <el-form :model="editFromModelForm" label-width="300px">
       <el-form-item label="序号" style="position: relative;  margin-left:-180px; top: 10px;" v-if="Ycchange">
      <el-input v-model="editFromModelForm.model_from_id" controls-position="right" v-if="Ycchange"></el-input>
       </el-form-item>
            <el-form-item label="配料名称" style="position: relative;  margin-left:-180px; top: 10px;">
            <el-select v-model="editFromModelForm.model_from_name" placeholder="请选择" style="width: 180px;">
            <el-option
              v-for="item in list3"
              :key="item.di_name"
              :label="item.model_from_name"
              :value="item.di_name">
            </el-option>
      </el-select>
    </el-form-item>
       <el-form-item label="重量" style="position: relative;  margin-left:-180px; top: 10px;">
      <el-input-number v-model="editFromModelForm.model_from_weight" :min="0" :max="200" :step="1" controls-position="right" style="width: 180px;"></el-input-number>
    </el-form-item>
    </el-form-item>
       <el-form-item label="外键Id" style="position: relative;  margin-left:-180px; top: 10px;" v-if="Ycchange">
       <el-input v-model="editFromModelForm.bs_modelmodel_id" v-if="Ycchange"></el-input>
    </el-form-item> 
  </el-form>
      <div>
        <span slot="footer" style="display: flex; justify-content: center;">
          <el-button  @click="isUpatemodelProductVisible = false"
            style="margin-left:40px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">取消</el-button>
          <el-button type="primary" @click="UpdateModelForm"
            style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FmC1B0; color: #fff;">确定</el-button>
        </span>
      </div>
    </el-dialog>
     </div>
    </div>
 </div>
</template>

<script>

import { MessageBox } from 'element-ui';
import $http from '@/routers/base';
export default {
  data() {
    return {
      index: 0,
      total:[],

      currentPage: 1, //当前页
      pageSize: 10, //每页显示数
      rows: 0, //总行数
      models: [], // 客户列表数据 

      currentPage1: 1, //当前页
      pageSize1: 3, //每页显示数
      totalItems: 0, //总行数

      currentPage2: 1, //当前页
      pageSize2: 3, //每页显示数
      modelfrom: [], //总行数
      modelfroms: 0,
      where: "",
      allData: [], 
      
      listName:[],
      list: [],
      list2:[],
      list3:[],
      Ycchange:false,
      model_from_weight: 1, // 初始值
      isAddModalVisible: false, // 控制新增客户弹窗的显示状态
      isAddProductVisible:false,  
      isQXModalVisible:false,
      isUpdateModalVisible:false,
      isUpateProductVisible:false,
      isUpatemodelProductVisible:false,
      AddFromSubmitModelForm:false,

      form: {
        model_model:'',
        model_name: '' ,
        model_class:'',
        model_bulk_units:'',
        model_bulk_price:'',
        model_wrap_units:'',
        model_wrap_price:'',
        model_updated_date:'',
      },
      from:{
        model_from_model:'',
        model_from_name:'',
        model_from_weight:'',
      },
      testArr:{

      },
       editForm:{
        model_id:'',
        model_model:'',
        model_name: '' ,
       
        model_bulk_units:'',
        model_bulk_price:'',
        model_wrap_units:'',
        model_wrap_price:'',
        model_updated_date:'',
      },
      editModelForm:
      {
        model_from_name:'',
        model_from_weight:'',
        bs_modelmodel_id:'',
        
      },
      editFromModelForm:{
        model_from_id:'',
        model_from_name:'',
        model_from_weight:'',
        bs_modelmodel_id:'',
        
      },
      selectedModelId :0,
    };
  },
  methods: {
    //查询产品数据字典
    fetch(){
      $http
        .get("BsModel/DictQuery")
          .then(res=>{
            this.list = res;
            this.list2 = res;
          })
          .catch(err => {
            alert(err);
          });
    },
    //查询产品名称
    ImgerFrom(){
      $http
        .get("BsModel/DictImagQuery")
          .then(res=>{
            this.listName = res;
          })
          .catch(err => {
            alert(err);
          });
    },
    // 当产品名称选择变化时触发
      onCustomerContactChange(selectedContact) {
          const contactInfo = this.listName.find(
              (c) => c.di_name === selectedContact
          );
          if (contactInfo) {
              this.form.model_model = contactInfo.di_code;
              this.editForm.model_model = contactInfo.di_code;
          }
      },
    //子产品型号添加
    UpdateSubmitModelForm(){
        if (this.editModelForm.model_from_name.trim() === '') {
       this.$message.error('请选择配料名称');
        return false;
    }
     $http.post('BsModel/FormAdd', {
           model_from_id: this.editModelForm.model_from_id,
           bs_modelmodel_id: ""+this.selectedModelId,
           model_from_name: this.editModelForm.model_from_name,
           model_from_weight: this.editModelForm.model_from_weight,
          IsDeleted:false

     })
     .then(response => {
        console.log(response);
        if (response) {
             this.$message.success('添加成功！');
             this.fetchUpaheModeFrom();
             this.isUpateProductVisible = false;
             this.isUpateProductVisible = false;
             this.editModelForm.model_from_name='';
             this.editModelForm.model_from_weight='';
             
       } else {
         this.$message.error('添加失败！请重新添加！');
         console.log("laoliu"+response);
        }
    })
     .catch(error => {
         this.$message.error('添加失败：' + error.message);
     })
    },
    //查看修改填值
    handleEdit(row){
     this.isUpdateModalVisible=true;
     this.selectedModelId=row.model_id;
     this.editModelForm.bs_modelmodel_id = this.selectedModelId
     this.fetch();
     this.fetchFrom();
     this.fetchUpaheModeFrom();
     this.$set(this.editForm, 'model_id', row.model_id); 
     this.$set(this.editForm, 'model_model', row.model_model);
     this.$set(this.editForm, 'model_name', row.model_name);
     //this.$set(this.editForm, 'model_class', row.model_class); 
     this.$set(this.editForm, 'model_bulk_units', row.model_bulk_units);
     this.$set(this.editForm, 'model_bulk_price', row.model_bulk_price);
     this.$set(this.editForm, 'model_wrap_units', row.model_wrap_units);
     this.$set(this.editForm, 'model_wrap_price', row.model_wrap_price);  
     this.$set(this.editForm, 'model_updated_date', row.model_updated_date);
    },
    //表料修改填值
    UpdateXCustomer(row)
    {
     this.isUpatemodelProductVisible=true;
     this.$set(this.editFromModelForm, 'model_from_id', row.model_from_id); 
     this.$set(this.editFromModelForm, 'model_from_name', row.model_from_name);
     this.$set(this.editFromModelForm, 'model_from_weight', row.model_from_weight);
     this.$set(this.editFromModelForm, 'bs_modelmodel_id', row.bs_modelmodel_id);
    },
    //产品配料表的修改
    UpdateModelForm()
    {
      $http.put('BsModel/FormUpdateClient',{
             model_from_id:this.editFromModelForm.model_from_id,
             model_from_name: this.editFromModelForm.model_from_name,
             model_from_weight: this.editFromModelForm.model_from_weight,
             bs_modelmodel_id:this.editFromModelForm.bs_modelmodel_id
      })
      .then(response=>{
        if(response){
          this.$message.success('修改成功！');
          this.fetchUpaheModeFrom();
          this.isUpatemodelProductVisible = false;
        }else{
          this.$message.error('修改失败！ 请重新修改！');
        }
      }).catch(error=>{
        this.$message.error('修改失败：'+error.message);
      })
    },

   //产品修改
    fetchXg(){ 
        let Cat = '0'; 
        Cat=this.modelfroms.toString();
        console.log("修改："+Cat);
        $http.put('BsModel/UpdateClient',{
           model_id: this.editForm.model_id,
           model_model:this.editForm.model_model,
           model_name: this.editForm.model_name,
           model_class:Cat,
           model_bulk_units: this.editForm.model_bulk_units,
           model_bulk_price: this.editForm.model_bulk_price,
           model_wrap_units: this.editForm.model_wrap_units,
           model_wrap_price: this.editForm.model_wrap_price,
           model_updated_date: this.editForm.model_updated_date,
           bs_Model_Froms: [{"model_from_name":"","model_from_weight":0}]
        })
          .then(response => {
            if (response) {
              this.$message.success('修改成功！');
               this.fetchModel();
                this.isUpdateModalVisible = false;
            } else {
              console.log("修改的值："+this.response);
              this.$message.error('修改失败！请重试！');
            }
          }).catch(error => {
            this.$message.error('修改失败：' + error.message);
          })
    },
   //产品修改中的删除 
    async DeleteCustomerY(model_from_id) {
      console.log(model_from_id);
      MessageBox.confirm('确认删除删除该条记录吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'bs_model',
      }).then(() => {
        $http.delete(`BsModel/FromDeleteModel/${model_from_id}`)
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
            this.fetchUpaheModeFrom();
          }).catch(error=>{
            this.$message.error('删除失败：'+error.message)
          })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '管理员取消了删除,删除无效哦！'
          })
        })
    },
    //查询配料数据字典
    fetchFrom(){
      $http
        .get("BsModel/FromDictQuery")
          .then(res=>{
            this.list3 = res;
          })
          .catch(err => {
            alert(err);
          });
    },
    //日期转型
    formatDate(dateString) {
            if (!dateString) {
                return '';
            }
            const date = new Date(dateString);
            if (isNaN(date.getTime())) {
                return '';
            }
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
    },
    //查询供应商
    async fetchModel() {
      const response = await $http.get('BsModel/Index');
      this.models = response
    },
    //分页
    fetchModel() {
          this.where="1=1";
      // 向后端请求数据，并更新客户数据和总条数
       $http.get('BsModel/getFenYe', {
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          where:this.where
       }
     }).then(res => {
            this.models =res.models;
            this.rows=res.rows;
     }).catch(error => {
        console.error('Error fetching client data: ', error);
     });
    },

   //产品型号主表删除
    async handleDelete(model_id) {
  // 弹出确认框
  MessageBox.confirm('确认删除删除该条记录吗？, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'bs_client',
  }).then(async () => {
    try {
      // 发送请求到后端删除数据
      const response = await $http.delete(`BsModel/FromDelete/${model_id}`);

      // 根据后端返回的消息进行相应的处理
      if (response === "未找到对应的数据") {
        this.$message.error('未找到对应的数据');
      } else if (response === "存在关联数据，删除失败") {
        this.$message.error('存在关联数据，删除失败');
      } else if (response === "删除成功") {
        this.$message.success('删除成功！');
        this.fetchModel(); // 删除成功后刷新数据
      } else {
        this.$message.error('未知错误');
      }
    } catch (error) {
      this.$message.error('删除失败：' + error.message);
    }
  }).catch(() => {
    // 用户点击取消按钮时的处理
    this.$message({
      type: 'info',
      message: '管理员取消了删除，删除无效哦！'
    });
  });
},

  //添加
    async fetchXH(){
       if (this.validateForm()) {
        let modelclass = '0'; // 默认值为 '0'，以防止 totalItems 为 undefined 时出错
        if (this.totalItems !== undefined) {
          modelclass = this.totalItems.toString();
        }       
        this.mainData =  {
           model_model: this.form.model_model,
           model_name: this.form.model_name,
           model_class: modelclass, 
           model_bulk_units: this.form.model_bulk_units,
           model_bulk_price:this.form.model_bulk_price,

           model_wrap_units: this.form.model_wrap_units,
           model_wrap_price: this.form.model_wrap_price,
           
           model_updated_date:this.form.model_updated_date,
           "isDeleted": false,
           bs_Model_Froms:this.allData};
        $http.post('BsModel/AddWarehouse', this.mainData
         )   
          .then(response => {
            if (response) {
              this.$message.success('添加成功！');
              this.fetchModel();
              this.isAddModalVisible = false;
               // 清空文本框字段
                 this.form.model_model = '';
                 this.form.model_name = '';
                 this.form.model_bulk_units = '';
                 this.form.model_bulk_price = '';
                 this.form.model_wrap_units = '';
                 this.form.model_wrap_price = '';
                 this.form.model_updated_date = '';
            } else {
              this.$message.error('添加失败！请重新添加！');
              
            }
          }).catch(error => {
            this.$message.error('添加失败：' + error.message);
          })
          
   }
   },
 handleCloseModal(done){
      this.allData=[];
      this.testArr=[];
      this.totalItems=0;
      done();
  },
  validateForm(){
      if (this.form.model_name.trim() === '') {
       this.$message.error('请选择产品名称！');
        return false;
    }
   if (typeof this.form.model_updated_date === 'string') {
    this.form.model_updated_date = this.form.model_updated_date.trim();
    this.$message.error('请选择更新日期！');
        return false;
     }
    if (this.form.model_bulk_units.trim() === '') {
        this.$message.error('请选择散装单位');
        return false;
    }
    if (this.form.model_bulk_price.trim() === '') {
        this.$message.error('请输入产品散装单价');
        return false;
    }
    if (this.form.model_wrap_units.trim() === '') {
       this.$message.error('请选择产品散装单位');
        return false;
    }
    if (this.form.model_wrap_price.trim() === '') {
        this.$message.error('请输入产品包装单价');
        return false;
    }
     // 所有字段都不为空，表单验证通过
    return true;
  },
    //虚拟数据
    SubmitModelForm() {
       if (this.from.model_from_name.trim() === '') {
       this.$message.error('请选择配料名称');
        return false;
    }
      if(this.testArr.length>0){
        this.allData = this.testArr;
      }
      // 将表单数据添加到暂时保存数据的数组中
      this.allData.push({
        model_from_name: this.from.model_from_name,
        model_from_weight: this.from.model_from_weight,
        index: this.allData.length // 保存当前数据项的下标
      }),
      // 清空表单数据
      this.from.model_from_name = '';
      this.from.model_from_weight = 0;

    // 将 allData 的值深拷贝给 testArr
      this.testArr = JSON.parse(JSON.stringify(this.allData));
      // 更新总条目数
      this.totalItems = this.allData.length;
      // 提示用户添加成功
      this.$message.success('添加成功！');
      this.isAddProductVisible = false; // 关闭对话框 

     // this.testArr = this.allData;
      this.currentPage1 = 1;
      this.End();
      // 输出数组的最后一个元素的索引
      console.log('数组最后一个元素的索引:', this.allData.length - 1);
      console.log(JSON.stringify(this.allData));
  },
    //虚拟删除
    deleteCustomer(index) {
  // 首先确保下标在合法范围内
  if (index >= 0 && index < this.allData.length) {
    // 从数组中删除指定下标的元素
    this.allData.splice(index,1 );
    // 更新总条目数
    this.totalItems = this.allData.length;
    // 深拷贝 allData 的值给 testArr
    this.testArr = JSON.parse(JSON.stringify(this.allData));
    // 提示用户删除成功 
    this.$message.success('删除成功！');
  } else {
    // 如果下标不在合法范围内，给出相应的提示
    this.$message.error('无法删除，下标越界！');
  }
  },
    handleSizeChange: function(size) {
      this.pageSize1 = size;
      this.currentPage1 = 1;
      this.End();
    },
    handleCurrentChange: function(page) {
      this.currentPage1 = page;
      this.End();
    },
    End() {
    // 根据当前页数和每页显示的条目数，截取相应的数据
     const startIndex = (this.currentPage1 - 1) * this.pageSize1;
     const endIndex = startIndex + this.pageSize1;
     this.allData = this.testArr.slice(startIndex, endIndex);
    },
  
    //子分页
   fetchUpaheModeFrom() {
        this.where = "bs_modelmodel_id="+this.selectedModelId;
      // 向后端请求数据，并更新客户数据和总条数
       $http.get('BsModel/ModelFromFenYe', {
        params: {
          currentPage: this.currentPage2,
          pageSize: this.pageSize2,
          where:this.where,

       }
     }).then(res => {
            this.modelfrom =res.modelfrom;
            this.modelfroms=res.rows;
            console.log(res)
            console.log(this.modelfrom);
     }).catch(error => {
        console.error('Error fetching client data: ', error);
     });
    },
   
   change: function(size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.fetchModel();
      
    },
    Ymchange: function(page) {
      this.currentPage = page;
       this.fetchModel();
    }, 

    changeModel: function(size) {
      this.pageSize2 = size;
      this.currentPage2 = 1;
     this.fetchUpaheModeFrom(); // 切换每页显示数后重新获取数据
    },
    YmchangeModel:function(page) {
      this.currentPage2 = page;
      this.fetchUpaheModeFrom(); // 重新获取数据
    },
     returnToList() {
       this.isAddModalVisible = false; // 返回列表
       this.isUpdateModalVisible=false
    },
    // 显示新增客户弹窗
    showAddModal() {
       this.isAddModalVisible = true;
       this.fetch();
       this.fetchFrom();
       
    },
    addCustomer(){
     this.isAddProductVisible = true;
    },

    UpdateCustomer(){
     this.isUpateProductVisible = true;
    },
  },
   mounted() {
    this.fetchModel();
    this.fetchUpaheModeFrom();
    this.ImgerFrom(); //添加产品名称
  },
};
</script>

<style scoped src="../CSS/Model.css"></style> 
<style scoped>

#sale{
    position: absolute;
    bottom: 0;
    top: 140px;
    right: 100px;
    margin: 20px;/* 调整按钮与分割线的距离 */
    transform: translateY(-50px); /* 这会使元素向下移动60像素 */  
}
.custom-div {
    font-size: 20px;
    margin-left: 90px;
    margin-top: -25px;
}
.e{
     transform: translateX(-70px);
}
.a{ 
  transform: translateY(5px); /* 这会使元素向右移动60像素 */ 
  background-color: var(--orange-color); /* 使用你定义的橙色变量 */
  color:#4FC1B0 ;/* 设置文本颜色为白色 */
}
.qw{

    margin-top: 160px;
    right: 260px;
    
}

.pagination-wrapper {
   transform: translateX(200px); /* 这会使元素向右移动60像素 */  
   height: 50px;
 }
</style>